<template>
  <span class="nav-title">
    <a :href="rootPath"><ri i="home"></ri></a> /
    <span>{{orgName}} / </span>
    <span v-if="isDeep"><a :href="projectPath">{{projectName}}</a> /</span>
    <span v-for="(p,i) in paths" :key="i">
      <a :href="linkpath(p)">
      {{p.name}}
      </a> /
    </span>
  <span @click="$emit('click-title', $event)">
    {{filename}}
  </span>
  </span>
</template>

<script>
import paths from "@/js/paths.js";
export default {
  props: ["source", "name"],
  emits: ["click-title"],
  computed: {
    paths() {
      let parts = this.name.split("/");
      let ps = [];
      for (let i = 3; i < parts.length - 1; ++i) {
        ps.push({
          name: parts[i],
          path: parts.slice(3, i+1).join("/")
        })
      }
      return ps;
    },
    orgPath() {
      return paths.join('/#/projects/', this.source, this.$route.params.organization);
    },
    orgName() {
      return this.$route.params.organization;
    },
    projectPath() {
      return paths.join('/#/projects/', this.source, this.$route.params.organization, this.$route.params.project);
    },
    projectName() {
      return this.$route.params.project;
    },
    filename() {
      return this.name.substr(this.name.lastIndexOf("/")+1)
    },
    isDeep() {
      return this.name.split("/").length > 3;
    },
    rootPath() {
      return '/#' + this.$store.getters.activeMenuIndex;
    }
  },
  data() {
    return {
    }
  },
  methods: {
    linkpath(p) {
      return  paths.join(this.projectPath, 'tree/master', p.path);
    }
  }
}
</script>
<style lang="stylus">
.nav-title
  font-size 1em
</style>